<template>
	<!-- 立即预约、加钟弹窗 -->
	<view class="content">  
		<view class="userInfo fx-row-sta">
			<view class="head_img">
				<image :src="projectInfos.workPhoto" mode="widthFix" lazy-load></image>
			</view>
			<view class="user_ri fx-col-c">
				<view class="ft28">技师：{{projectInfos.name}}</view>
				<view class="fx-row-sta mt16 grey3">
					<view class="fx-row-sta mr45">
						<image class="icon_img mr4" src="/static/picture/icon2.png" mode="widthFix" lazy-load></image>
						<span>安全性</span>
					</view>
					<view class="fx-row-sta  mr45">
						<image class="icon_img mr4" src="/static/picture/icon3.png" mode="widthFix" lazy-load></image>
						<span>爽约包退</span>
					</view>
					<view class="fx-row-sta mr45" >
						<image class="icon_img mr4" src="/static/picture/icon4.png" mode="widthFix" lazy-load></image>
						<span>专业可靠</span>
					</view>
				</view>
			</view>
		</view>
		<view class="utips" v-if="state=='0'"><span class=" text-beyond-multi3">{{projectInfo.introduce}}</span></view>
		<view class="service">
			<view class="ft32" v-if="state=='1'">选择项目</view>
			<view class="s_list">
				<view class="user_item fx-row" v-for="(item,index) in projectLists" :key="item.id" @click.stop="goInfo(item)">
					<view class="picture mr26">
						<image :src="item.cover" mode="widthFix" lazy-load></image> 
					</view>
					<view class="fx-col-sb" style="width: 460rpx;height: 130rpx;">
						<view class="text-beyond ft28"  style="width: 300rpx;font-weight: 500;">{{item.name}}</view> 
						<view class="mt10 ft18 grey1 text-beyond" style="width: 260rpx;">{{item.recommend}}</view>
						<view class="mt10">
							<span class="mr4 f28 red"><span class="ft20">￥</span>{{conversion(item.discountPrice)}}</span>
							<span class="ft20 grey1"  style="text-decoration:line-through"><span>￥</span>{{conversion(item.price)}}</span>
						</view> 
						<view class="item_float fx-row-sta mt10 ft18 grey2"> 
							<image class="img_tip" src="/static/picture/time.png" mode="widthFix" lazy-load></image>
							<span class="ft18" style="color: #3F3F3F;">{{item.duration}}分钟</span> 
						</view>
						<view class="item_btn">
							<uv-number-box v-model="item.num" :min="0" :max="10"  :disabledInput="true" @change="snum($event,index,item.id,item.discountPrice)">
								<template v-slot:minus>
									<view :class="['minus',{'disable':item.num=='0'}]"  >
										<uv-icon v-if="item.num!='0'" name="minus" size="12" color="#fff"></uv-icon>
										<uv-icon v-else name="minus" size="12" color="#C7C7C7"></uv-icon>
									</view>
								</template>
								<template v-slot:input>
									<text class="input">{{item.num}}</text>
								</template>
								<template v-slot:plus>
									<view :class="['plus',{'disable':item.num=='10'}]" >
										<uv-icon  v-if="item.num!='10'" name="plus" color="#fff" size="12"></uv-icon>
										<uv-icon  v-else name="plus" color="#C7C7C7" size="12"></uv-icon>
									</view>
								</template>
							</uv-number-box>
						</view> 
					</view> 
				 </view> 
			</view>
		</view>
		<!-- 预约 --> 
		<view class="fx-row-sb-c orderbtn ">
			<span class="total ft26">合计:<span class="red">￥</span><span class="red ft32">{{allPrice}}</span></span>
			<span v-if="state=='0'" class="gobtn" @click="subscribe">立即预约</span>
			<span v-if="state=='1'" class="gobtn" @click="subscribe">加钟并支付</span>
		</view>
	</view>
</template>

<script>
	import {  } from '@/utils/api.js' 
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import badgeMix from '@/common/mixins.js'
	export default { 
		props:['state','projectList','projectInfo','allPrice'],
		mixins: [badgeMix],
		data() {
			return {
				content:'',
				addOrderId:'',
				projectNum:'',
				projectLists:[],
				projectInfos:this.projectInfo,
				allPrice:'0.00'
			}
		},
		watch:{ 
			projectInfo(newValue, oldValue) { 
				this.projectInfos = newValue
			},
			projectList(newValue, oldValue) {  
				this.allPrice = '0.00'
				this.projectLists = newValue
			}, 
			deep: true // 深度监听父组件传过来对象变化 
		},
		onLoad() { 
		},
		onShow() { 
			
		},
		methods: { 
			// 项目数量改变
			snum(e,index,id,discountPrice){
				console.log(e,index);
				this.projectNum = e.value  
				this.$nextTick(()=>{
					this.allPrice = ( (discountPrice / 100).toFixed(2) * e.value).toFixed(2)
				})
				this.projectLists.forEach((item,indexs)=>{
					console.log(item.num,typeof(item));
					this.projectLists[indexs].num = 0
					if(id == item.id){
						this.addOrderId = this.projectLists[indexs].id  
						this.projectLists[indexs].num = e.value
					} 
				})
			},
			// 立即预约
			subscribe(){ 
				if(this.addOrderId==''){
					return toast('请添加需要服务的项目！')
				}
				if(this.projectNum==''){
						return toast('请添加服务的数量！')
				}
				this.$nextTick(()=>{
					this.allPrice = ''
				}) 
					// 订单id   订单数量  技师id
				console.log(this.addOrderId,this.projectNum,this.projectInfos.id,"预约弹窗数据1");  
				this.$emit('addProject',this.addOrderId,this.projectNum,this.projectInfos.id) 
			},
			// 项目详情
			goInfo(item){
				this.$emit('goInfor',item.id) 
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page ;
	} 
	.uv-safe-area-inset-bottom{
		padding-bottom: 0 !important;
	}
	.content{
		/*  #ifdef  H5  */
		margin-bottom: var(--window-bottom);
		/*  #endif  */ 
		/*  #ifdef  MP-WEIXIN  */
		// margin-bottom: -100rpx;
		/*  #endif  */ 
	}
	.uv-safe-area-inset-bottom{
		padding-bottom: 0 !important;
	}
	.userInfo{
		padding: 36rpx 25rpx 20rpx 25rpx;
		font-size: 22rpx; 
		.head_img{
			width: 90rpx;
			height: 90rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
			}
		}
		.user_ri{
			width:600rpx ;
		}
		.icon_img{
			width: 30rpx;
			height: 38rpx;
			
		}
	}
	.utips{
		width: 660rpx; 
		padding: 0 45rpx;
		padding-bottom: 14rpx;
		border-bottom: 1rpx solid #EAEAEA;
		background-color: #fff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		font-size: 24rpx;
		color: #696969;
		line-height: 38rpx;
		
	}
	.service{
		width: 700rpx;
		max-height: 500rpx;
		padding: 0 25rpx; 
		overflow: hidden;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		.s_list{
			.user_item{
				position: relative;
				width:650rpx;
				padding: 22rpx 20rpx 28rpx 20rpx;
				background-color: #fff;
				border-radius: 12rpx;
				border-bottom: 1rpx solid #eaeaea;
				// box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
				.picture{
					position: relative;
					width: 160rpx;
					height: 130rpx;
					border-radius:16rpx;
					overflow: hidden; 
					image{
						width: 100%;
					} 
				} 
				.img_tip{
					width: 20rpx;
					height: 20rpx;
					margin-right: 4rpx;
				}
				.item_float{
					position: absolute;
					right: 20rpx;  
				}
				.item_btn{
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					width: 178rpx;
					height: 60rpx;  
				}
			}
			.user_item:last-child{
				border-bottom: 0;
			}
		}
	}
	.orderbtn{
		// position: fixed;
		// bottom: 0;
		// left: 0;
		position: relative;
		width: 700rpx;
		height: 115rpx;
		padding: 0 25rpx;
		background-color: #fff;
		border-top: 1rpx solid #f9f9f9;
		border-bottom: 1rpx solid #f9f9f9;
		.gobtn{
			width: 246rpx;
			height: 64rpx;
			background-color: $uni-main;
			border-radius: 38rpx;
			text-align: center;
			font-size: 24rpx;
			color: #fff;
			line-height: 64rpx;
		}
	}
	 
</style>
